<template>
	<view>
		<view style="padding: 20rpx;">
			<button class="btn-submit" @click="addOtherMoka">新增模卡资料</button>
		</view>

		<view style="background: #FFF;padding:20rpx;" v-if="otherMokaList.length > 0">
			<view v-for="(item,index) in otherMokaList" :key="index"
				style="border-bottom:1rpx solid #f0f0f0;padding:20rpx;position: relative;">
				<view style="position: absolute;right: 10rpx;top: 10rpx;font-size: 26rpx;color: #3e61ff;"
					@click="getOtherInfo(item)">
					生成模卡
				</view>
				<view style="font-size: 30rpx;text-align: center;padding-bottom: 5rpx;">{{ item.NickName }}</view>

				<view style="display: flex;flex-direction: row">
					<view
						style="flex: 1;font-size: 24rpx;text-align: center;border-bottom:1rpx solid #d6d6d6;border-right:1rpx solid #d6d6d6;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">性别</view>
						<view>{{ JSON.parse(item.UserSex).text }}</view>
					</view>
					<view
						style="flex: 1;font-size: 24rpx;text-align: center;border-bottom:1rpx solid #d6d6d6;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">生日</view>
						<view>{{ item.UserBirth }}</view>
					</view>
				</view>


				<view style="display: flex;flex-direction: row">
					<view
						style="flex: 1;font-size: 24rpx;text-align: center;border-bottom:1rpx solid #d6d6d6;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">身高</view>
						<view>{{ JSON.parse(item.UserBaseinfo).shengao }}</view>
					</view>
					<view
						style="flex: 1;font-size: 24rpx;text-align: center;border:1rpx solid #d6d6d6;border-top:none;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">体重</view>
						<view>{{ JSON.parse(item.UserBaseinfo).tizhong }}</view>
					</view>
					<view
						style="flex: 1;font-size: 24rpx;text-align: center;border-bottom:1rpx solid #d6d6d6;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">鞋码</view>
						<view>{{ JSON.parse(item.UserBaseinfo).jiaoma }}</view>
					</view>
				</view>

				<view style="display: flex;flex-direction: row">
					<view style="flex: 1;font-size: 24rpx;text-align: center;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">胸围</view>
						<view>{{ JSON.parse(item.UserBaseinfo).sanwei[1] }}</view>
					</view>
					<view
						style="flex: 1;font-size: 24rpx;text-align: center;5rpx;border:1rpx solid #d6d6d6;border-top:none;border-bottom:none;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">腰围</view>
						<view>{{ JSON.parse(item.UserBaseinfo).sanwei[2] }}</view>
					</view>
					<view style="flex: 1;font-size: 24rpx;text-align: center;padding: 5rpx;">
						<view style="color:#d6d6d6;padding-bottom: 5rpx;">臀围</view>
						<view>{{ JSON.parse(item.UserBaseinfo).sanwei[3] }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<fui-empty :src="baseUrl + 'icon/null.png'" title="暂无新消息"></fui-empty>
		</view>
	</view>
</template>

<script>
	import {
		getOtherListApi
	} from '@/api/login.js'
	export default {
		data() {
			return {
				mokaStyle: 0,
				mokaTemplateID: 0,
				targetUser: 1,
				otherMokaList: []
			};
		},
		onLoad(option) {
			this.mokaStyle = option.style;
			this.mokaTemplateID = option.mokaTemplateID
			this.getOtherList();
		},
		methods: {
			getOtherList() {
				getOtherListApi().then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.otherMokaList = res.data.otherMokaList
					}
				})
			},
			getOtherInfo(item) {
				uni.navigateTo({
					url: '/moka/pages/mokaOtherInfo?style=' + this.mokaStyle + '&otherID=' + item.OtherID +
						'&mokaTemplateID=' + this.mokaTemplateID
				})
			},
			addOtherMoka() {
				uni.navigateTo({
					url: '/moka/pages/mokaOtherInfo?style=' + this.mokaStyle + '&otherID=0&mokaTemplateID=' + this
						.mokaTemplateID
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn-submit {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #FFDD00;
		font-size: 26rpx;

		&::after {
			border: none;
		}
	}
</style>